<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>QuizMe</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../include/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="../js/choose.js"></script>
    <script src="../js/simpleajax.js"></script>

    <link href="../css/close.css" rel="stylesheet">

</head>

<body>


    <body class="is-preload">
        <div id="page-wrapper">

            <nav id="nav" class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="#">QuizMe</a>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="../index.html">Home</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="../html/choose.html" style="text-decoration: none">Quiz Now</a>
                        </li>

                        <li id="login" class="nav-item">
                            <a class="nav-link" href="../html/login.html" style="text-decoration: none">Login Now</a>
                        </li>
                        <li id="login-out" class="nav-item">
                            <a class="nav-link" href="../html/logout.html" style="text-decoration: none">Login out
                                Now</a>
                        </li>
                        <li id="profile" class="nav-item">
                            <a class="nav-link" href="../html/personal.html" style="text-decoration: none">Personal
                                information</a>
                        </li>
                    </ul>
                </div>

            </nav>

            <div id="quiz" class="alert alert-secondary">

                <form name="quiz_form">
                    <!-- <?= $des1?> -->

                    <div id="Category">

                    </div>

                    <label>Level:</label>
                    <input type="radio" name="option2" value=1 checked='checked'><label>easy</label>
                    <input type="radio" name="option2" value=2><label>medium</label>
                    <input type="radio" name="option2" value=3><label>hard</label>
                    <input type="radio" name="option2" value=4><label>random</label><br><br>

                    <label>Size:</label>
                    <input type="radio" name="option3" value=5 checked='checked'><label>short</label>
                    <input type="radio" name="option3" value=10><label>medium</label>
                    <input type="radio" name="option3" value=15><label>long</label><br><br>

                    <label>Time limit:</label>
                    <input type="radio" name="option4" value=0 checked='checked' id="time_no"><label>no</label>
                    <input type="radio" name="option4" value=1 id="time_yes"><label>yes</label>
                    <div id="countdown-div" style="display: none;">
                        <label for="countdown">You can set timer in [5-20]s</label>
                        <input type="number" name="times" id="countdown" placeholder="[5-20]s" min="5"
                            max="20" class="form-control col-2">
                        <p>Note: If you do not click the button before the countdown ends, your answer will still be
                            recorded.</p>
                    </div>
                    <br><br>

                    <div id="property">
                        <label>Modes:</label>
                        <input type="radio" name="option5" value="Public" checked='checked'><label>Public-only</label>
                        <input type="radio" name="option5" value="Private"><label>Private-only</label>
                        <input type="radio" name="option5" value="Mixed"><label>Mixed</label><br><br>
                    </div>

                    <div class="row justify-content-center">
                        <button id="quiz-submit" type="button"
                            class="col col-sm-6 btn btn-primary btn-lg btn-block">Start</button>
                    </div>

                </form>

            </div>
        </div>
    </body>

    <div id="footer">
        Tianjin University TIEI &copy; 2023
    </div>
</body>

</html>